<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../static/js/jquery.min.js"></script>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <script src="../static/js/bootstrap.min.js"></script>
    <title>消费确认</title>
    <?php
    require_once "session.php";
    ?>
    <style>
        body{
            background-image:url("system_icon/background2.jpg");
        }
        #head{
            height: 80px;
            width: 100%;
            margin-top: 5%;
            color: white;
            font-family: 楷体;
            font-size: 55px;
            text-align: center;
        }
        #MainPanel{
            color: white;
            font-size: 30px;
            font-family: 楷体;
            margin-top: 5%;
        }
        .small_div{
            margin-top: 2%;
        }
        input{
            color: black;
            border-radius: 30px;
            outline:none;
        }
        #cancel{
            border-color: white;
            border-radius:30px;
            background-color: rgb(35,35,35);
            outline:none;
        }
        #empty{
            border-color: white;
            border-radius:10px 10px 30px 30px;
            background-color: rgb(35,35,35);
            outline:none;
        }
        #search{
            border-radius:30px;
            background-color: rgb(35,35,35);
            outline:none;
        }
        #enter_btn{
            border-radius:10px 10px 30px 30px;
            background-color: gray;
            outline:none;
        }
        .modal-content{
            width: 610px;
            border-radius: 20px;
            margin:5% auto;
        }
        .modal-header{
            text-align: center;font-size: 30px;
            background-color: rgb(120,120,120);
            color: white;
            font-family: 楷体;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }
        .modal-body{
            width: 600px;
            height: 250px;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        #table{
            width: 550px;
        }
    </style>
</head>
<body>
<div id="head">
    客人消费确认
</div>
<div id="MainPanel" align="center">
    <form action="">
        <div id="order_num" class="small_div">
            小票号：<input type="text" onkeyup="inp_order(this)" id="order">
        </div>
        <div id="tel" class="small_div">
            手机号：<input type="text" onkeyup="inp_phone(this)" id="phone" name="tel">
        </div>
        <div id="msg" class="small_div" style="display: none"></div>
        <div id="money" class="small_div">
            消 &nbsp;费：<input type="text" onkeyup="inp_money(this)" id="expend">
        </div>
        <div class="small_div">
            发 &nbsp;票：
            <input name="fp" type="radio" value="1">已开
            <input name="fp" type="radio" value="0">未开
        </div>
        <div id="enter" class="small_div">
            <button id="cancel">返回首页</button>
            <button type="reset" id="empty">清空列表</button>
            <button id="enter_btn" disabled="disabled">确认消费</button>
            <button id="search" >记录查询</button>
        </div>
    </form>
</div>
<div class="modal" id="expend_log" style="display: none">
    <div class="modal-content">
        <div class="modal-header">客人消费记录</div>
        <div class="modal-body" >
            <table id="table" class="table table-striped">
            </table>
        </div>
        <div class="modal-footer">
            <button class="btn btn-default" id="exit" style="font-family: 楷体;font-size: 17px">返回</button>
        </div>
    </div>
</div>

<div class="modal" id="prize" style="display: none;" >
    <div class="modal-content">
        <div class="modal-header">奖品兑换</div>
        <div class="modal-body" >
            <table id="prize_table" class="table table-striped">
            </table>
        </div>
        <div class="modal-footer">
            <button class="btn btn-default" id="pri_exit" style="font-family: 楷体;font-size: 17px">返回</button>
        </div>
    </div>
</div>

<div class="modal" id="search_expend" style="display: none">
    <div class="modal-content" style="height:230px;width: 300px;margin: 5% auto">
        <div class="modal-header">客人消费记录查询</div>
        <div class="modal-body" style="text-align:center;font-size:22px;font-family: 楷体;height: 100px;width: 300px;overflow: hidden">
            <div style="margin-top: 8%">手机号:<input type="text" id="s_phone" onkeyup="inp_phone(this)" style="width: 180px"></div>
        </div>
        <div class="modal-footer" style="padding: 8px 15px">
            <button class="btn btn-default" id="cx" style="font-family: 楷体;outline:none;font-size: 17px;border-radius: 30px">查询</button>
            <button class="btn btn-default" id="qx" style="font-family: 楷体;outline:none;font-size: 17px;border-radius: 30px">返回</button>
        </div>
    </div>
</div>
<script>

    $('#cx').click(function () {
        var phone=$('#s_phone').val();
        show_expend(phone);
        $('#expend_log').stop(true,true);
        $('#expend_log').show(500);
        $('#s_phone').val("");
        $('#search_expend').hide(1);
    });

    $('#cancel').click(function(){
       location.href="Order_Menu.php";
        return false;
    });

    $('#phone').blur(function(){
        var phone=$('#phone').val();
        if(!/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone)){
            $("#phone").val("");
        }
        phone=$('#phone').val();
        if(phone!=""){
            $.post("fun_search_phone.php",{phone:phone},function (o) {

                if(o=='false'){
                    $("#phone").val("");
                    $('#msg').stop(true,true);
                    $('#msg').html("对不起，用户不存在，请重试");
                    $('#msg').show(500);
                    setTimeout(function () {
                        $("#msg").hide(500);
                    }, 1500);
                }else{
                    $('#msg').html("恭喜，查询用户通过验证");
                    $('#msg').show(500);
                    setTimeout(function () {
                        $("#msg").hide(500);
                    }, 2000);
                }
            });
        }
        yz();
    });

    $('input[name="fp"]').change(function(){
        yz();
    });

    $('#search').click(function () {
        $('#search_expend').stop(true,true);
        $('#search_expend').show(500);
        return false;
    });

    $('#qx').click(function () {
        $('#s_phone').val("");
        $('#search_expend').hide(500);
    });

    $('#enter_btn').click(function(){
        var order=$("#order").val();
        var tel=$('#phone').val();
        var money=$('#expend').val();
        var fp=document.getElementsByName("fp");
        var isBenefit="";
        for(var a=0;a<fp.length;a++){
            if(fp[a].checked){
                isBenefit=fp[a].value;
                break;
            };
        }
        $.post("fun_add_expend.php",{order:order,tel:tel,money:money,isBenefit:isBenefit},function(o){
            if(o==""){
                show_expend(tel);
                $('#expend_log').stop(true,true);
                $('#expend_log').show(500);
            }
        });
        return false;
    });

    $('#exit').click(function () {
        $('#expend_log').hide(500);
    });

    $('#pri_exit').click(function () {
        $('#prize').hide(500);
    });

    function inp_order(obj){
        obj.value = obj.value.replace(/[^\d]/g,"");
        yz();
    }

    function inp_phone(obj){
        obj.value = obj.value.replace(/[^\d]/g,"");
        obj.value = obj.value.replace(/^[^1]/g,"");
        obj.value = obj.value.replace(/^1[^3456789].*/g,"1");
        obj.value = obj.value.replace(/(\d{1,11}).*$/,"$1");
        yz();
    }

    function inp_money(obj){
        obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
        obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字而不是
        obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
        obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
        yz();
    }

    function yz(){
        var btn=document.getElementById("enter_btn");
        var order=$("#order").val();
        var tel=$('#phone').val();
        var money=$('#expend').val();
        var fp=document.getElementsByName("fp");
        var isBenefit="";
        for(var a=0;a<fp.length;a++){
            if(fp[a].checked){
                isBenefit=fp[a].value;
                break;
            };
        }
        if(order!=""&&tel!=""&&money!=""&&isBenefit!=""){
            btn.style.backgroundColor="rgb(35,35,35)";
            $("#enter_btn").removeAttr("disabled");
        }else{
            btn.style.backgroundColor="gray";
            btn.disabled="disabled";
        }
    }

    function show_expend(tel) {
        $.post("fun_show_expend.php",{tel:tel},function (o) {
            tableEmpty();
            var js=eval(decodeURI(o));
            $("#table").append("<tr style='height:30px'><th>金额</th><th>时间</th><th>奖品</th></tr>");
            for(var i=0;i<js.length;++i){
                $("#table").append("<tr style='height: 30px'><td>"+js[i].money+"</td><td>"+js[i].create_time+"</td><td>"
                    +(js[i].allow_barter==false?"无可兑换礼品":((js[i].finish_barter==true?js[i].name:"" +
                    "<button class='btn btn-primary' onclick='choose_prize("+js[i].id+")'>兑换奖品</button>")))+"</td></tr>")
            }
        });
    }

    function choose_prize(id) {
        getprize(id);
        $('#prize').stop(true,true);
        $('#prize').show(500);
    }
    
    function getprize(id) {
        $.post("fun_getprize.php",{id:id},function (o) {
            prizeEmpty();
            var js=eval(decodeURI(o));
            $("#prize_table").append("<tr style='height: 30px'><td>奖品名称</td><td>消费需求</td><td>奖品兑换</td></tr>")
            for(var i=0;i<js.length;++i){
                $("#prize_table").append("<tr style='height: 30px'><td>"+js[i].name+"</td><td>"+js[i].expend+"" +
                    "</td><td><button type='button' class='btn btn-primary' onclick='prize("+id+","+js[i].id+","+js[i].phone+")' "
                    +(js[i].allow==true?">确认兑换":"disabled>消费不足")+"</button></td></tr>")
            }
        })
    }

    function prize(expend_log_id, prize_id,phone) {
        $.post("fun_getmessage.php",{expendAddPrize1:expend_log_id,expendAddPrize2:prize_id},function (o) {
            $("#prize_table").html(o);
            show_expend(phone);
        })
    }
    
    function tableEmpty() {
        $("#table").html("")
    }
    function prizeEmpty() {
        $("#prize_table").html("")
    }
</script>
</body>
</html>